function userMedia(){}

userMedia.prototype = {

    charactersCount: function()
    {
        let limit = 4000;
        let charactersInTextArea = document.getElementById('historyTextarea').value.length;
        let characteresRemaining = limit - charactersInTextArea;

        document.getElementById('charactersRemaining').innerText = characteresRemaining;
    },

    croppieInit: function (object, productId, eventId) {
        this.addInputName(productId);
        this.addImageButtons(productId);

        const c = new Croppie(document.getElementById('user-photo'), {
                viewport: {width: 218, height: 303},
                boundary: {width: 305, height: 305},
            });

        document.getElementById('cut').addEventListener('click', function () {
            c.result('blob').then(function (blob) {
                c.result({type: 'base64', size: 'original'}).then(function (result) {
                    object.uploadPhoto(result, productId, eventId);

                    object.addThumbnail(result, productId);

                    object.setAvatarName(productId);

                    c.destroy();
                    document.getElementById('file_' + productId).value = '';

                    $('.photo-general').remove();

                    document.getElementById(productId).scrollIntoView();
                });
            })
        });

        document.getElementById('cancel').addEventListener('click', function () {
            c.destroy();

            document.getElementById('file_' + productId).value = '';
            $('.photo-general').remove();
        });
    },

    setAvatarName: function (productId) {
        const avatarName = document.getElementById('name').value;

        document.getElementById('avatar_name_' + productId).innerHTML = avatarName;
    },

    addEditPhotoRow: function (productId, eventId) {
        let divPhotoGeneral = document.createElement('div');
        divPhotoGeneral.setAttribute('class', 'photo-general');
        divPhotoGeneral.setAttribute('id', 'photoGeneral' + productId);

        let divPhotoContainer = document.createElement('div');
        divPhotoContainer.setAttribute('id', 'photoContainer' + productId);
        divPhotoContainer.setAttribute('class', 'row mt-4 photoContainer');

        let divPhoto = document.createElement('div');
        divPhoto.setAttribute('id', 'photo' + productId);
        divPhoto.setAttribute('class', 'col-md-6 center');

        let divPhotoCommands = document.createElement('div');
        divPhotoCommands.setAttribute('id', 'photoCommands' + productId);
        divPhotoCommands.setAttribute('class', 'col-md-12 text-center');

        let divExampleGif = document.createElement('div');
        divExampleGif.setAttribute('class', 'col-md-5 center');
        divExampleGif.setAttribute('style', 'text-align:center;padding-top: 50px;');

        let paragrapgDescriptionGif = document.createElement('p');
        paragrapgDescriptionGif.innerText = 'Veja como enquadrar a foto';

        let gifUrl = false;

        switch (eventId) {
            case 7045:
            case 7070:
                gifUrl = 'https://s3-sa-east-1.amazonaws.com/sgegeo/images/gif_default_body.gif';
                break;
            case 7038 :
                gifUrl = 'https://s3-sa-east-1.amazonaws.com/sgegeo/images/gif_atletico_body.gif';
                break;
            default:
                gifUrl = 'https://s3-sa-east-1.amazonaws.com/sgegeo/images/gif_default_face.gif';
        }

        let imgExampleGif = document.createElement('img');
        imgExampleGif.setAttribute('src', gifUrl);

        divExampleGif.appendChild(paragrapgDescriptionGif);
        divExampleGif.appendChild(imgExampleGif);

        divPhotoContainer.appendChild(divExampleGif);

        divPhotoContainer.appendChild(divPhoto);
        
        divPhotoContainer.appendChild(divPhotoCommands);

        divPhotoGeneral.appendChild(divPhotoContainer);

        const referenceRow = document.getElementById(productId);

        referenceRow.appendChild(divPhotoGeneral);
    },

    addInputName: function (productId) {
        let divNameInput = document.createElement('div');
        divNameInput.setAttribute('id', 'inputName' + productId);
        divNameInput.setAttribute('class', 'form-group text-center');
        divNameInput.setAttribute('style', 'padding: 15px');

        let inputName = document.createElement('input');
        inputName.type = 'text';
        inputName.setAttribute('id', 'name');
        inputName.setAttribute('class', 'form-control');
        inputName.placeholder = '* Digite o nome e sobrenome';
        inputName.addEventListener('keyup', function () {
            if (this.value.length >= 3) {
                document.getElementById('cut').removeAttribute('disabled');
                document.getElementById('cut').removeAttribute('class');
                document.getElementById('cut').setAttribute('class', 'btn-able fc-btn btn-padrao-ativo mx-2');
            } else {
                document.getElementById('cut').setAttribute('disabled', 'disable');
                document.getElementById('cut').removeAttribute('class');
                document.getElementById('cut').setAttribute('class', 'btn-disable fc-btn btn-padrao-ativo mx-2');
            }
        });

        divNameInput.appendChild(inputName);

        document.getElementById('photoCommands' + productId).appendChild(divNameInput);
    },

    addThumbnail: function (base64result, productId) {
        const imgElement = document.getElementById('user_thumb_'+productId);
        const isThumbnailImgElement = document.getElementById('thumbnail_'+productId).contains(imgElement);

        if (isThumbnailImgElement) {
            document.getElementById('user_thumb_'+productId).remove();
        }

        let imgThumbnail = document.createElement('img');

        const attrImgThumbnailId = document.createAttribute('id');
        attrImgThumbnailId.value = 'user_thumb_'+productId;

        const attrImgThumbnailSrc = document.createAttribute('src');
        attrImgThumbnailSrc.value = base64result;

        const attrImgThumbailClass = document.createAttribute('class');
        attrImgThumbailClass.value = 'avatar-thumbnail';

        const attrImgThumbailBorderRadius = document.createAttribute('style');
        attrImgThumbailBorderRadius.value = 'border-radius: 50%; width: 56px; height: 56px;';

        imgThumbnail.setAttributeNode(attrImgThumbnailId);
        imgThumbnail.setAttributeNode(attrImgThumbnailSrc);
        imgThumbnail.setAttributeNode(attrImgThumbailClass);
        imgThumbnail.setAttributeNode(attrImgThumbailBorderRadius);

        document.getElementById('thumbnail_'+productId).appendChild(imgThumbnail);
    },

    uploadPhoto: function (base64file, productId, eventId) {
        const avatarName = document.getElementById('name').value;
        ajaxLoader.ajaxStart();
        $.ajax({
            url: '/user-media/upload',
            data: {'file': base64file, 'productId': productId, 'avatarName': avatarName, 'eventId': eventId},
            type: 'post',
            dataType: 'json',
            success: function(json) {
                ajaxLoader.ajaxStop();
                if (!json.status) {
                    let modalError = new Modal({
                        title: json.title,
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                    });
                    modalError.show();
                } else if (json.enablePayment) {
                    document.getElementById('pay').removeAttribute('disabled');
                    document.getElementById('pay').removeAttribute('class');
                    document.getElementById('pay').setAttribute('class', 'btn-able fc-btn btn-padrao-ativo w-100 py-2');
                }

                console.log(json.enablePayment);
            },
        });
    },

    clear: function (object) {
        return function () {
            document.getElementById('photo').innerHTML = '';
            document.getElementById('cutContainer').innerHTML = '';
        }
    },

    addImageButtons: function (productId) {
        let cutButton = document.createElement('button');
        let containerButtons = document.createElement('div');

         containerButtons.setAttribute('class', 'button-container d-flex justify-content-center');

        cutButton.setAttribute('id', 'cut');
        cutButton.setAttribute('class', 'btn-disable fc-btn btn-padrao-ativo mx-2');
        // cutButton.setAttribute('style', 'margin-bottom: 10px');
        cutButton.setAttribute('disabled', 'disable');
        cutButton.style.color = '#000';
        cutButton.innerHTML = 'RECORTAR';

        let cancelButton = document.createElement('button');
        cancelButton.setAttribute('id', 'cancel');
        cancelButton.setAttribute('class', 'btn-disable fc-btn btn-padrao-ativo mx-2');
        cancelButton.style.color = '#000';
        cancelButton.innerHTML = 'CANCELAR';

        containerButtons.appendChild(cutButton);
        containerButtons.appendChild(cancelButton);

        document.getElementById('photoCommands' + productId).appendChild(containerButtons);
    },

    getReadedFile: function(reader, element, object, productId, eventId) {
        return function () {
            const img = document.createElement('img');
            img.src = reader.result;
            img.setAttribute('id', 'user-photo');
            element.appendChild(img);
            img.addEventListener('load', function () {
                object.croppieInit(object, productId, eventId);
            });
        }
    },

    fileReader: function(e, object, productId, eventId) {
        const files = e;
        const element = document.getElementById('photo'+productId);

        const reader = new FileReader();
        reader.addEventListener('load', object.getReadedFile(reader, element, object, productId, eventId));
        reader.readAsDataURL(files);
    },

    b64toBlob: function (b64Data, contentType='', sliceSize=512) {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];
      
        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          const slice = byteCharacters.slice(offset, offset + sliceSize);
      
          const byteNumbers = new Array(slice.length);
          for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
          }
      
          const byteArray = new Uint8Array(byteNumbers);
          byteArrays.push(byteArray);
        }
      
        const blob = new Blob(byteArrays, {type: contentType});
        return blob;
    },

    resizeImage: function (file, productId, eventId, object, directorId) {
        let resize = new window.resize();
        resize.init();

        resize.photo(file, 1600, 'dataURL', function (imagem) {
            let img = imagem.split(',');

            object.addEditPhotoRow(productId, eventId);

            let newBlbob = object.b64toBlob(img[1], 'image/png');
 
            document.getElementById('file_'+productId).addEventListener('change', object.fileReader(newBlbob, object, productId, eventId));
        });
    },

    clickMsg: function(productId) {
        document.getElementById('file_'+productId).click();
    },

    setImage: function (productId, eventId, directorId) {

        $('.photo-general').remove();

        const files = event.target.files;

        this.resizeImage(files[0], productId, eventId, this, directorId);
    },

    expireCart: function (){
        ajaxLoader.ajaxStart();

        setTimeout(function(){
            $.ajax({
                url: '/shopping-cart/expire-cart',
                dataType: 'json',
                method: 'post',
                success: function(json){
                    ajaxLoader.ajaxStop();
                    if(json.status){
                        window.location.href = json.url;
                    } else {
                        window.location.reload();
                    }

                }
            });
        }, 3000);
    },

    pay: function () {
        let thisObject = this;
        $.ajax({
            url: '/user-media/pay',
            //data: {'file': base64file, 'productId': productId, 'avatarName': avatarName},
            type: 'post',
            dataType: 'json',
            success: function(json) {
                if(json.status) {
                    thisObject.orderGenerate(json.cartId);
                } else {
                    let modalError = new Modal({
                        title: 'Aviso',
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                        cancelText: 'OK',
                    });

                    modalError.show();
                }
            },
        });        
    },

    orderGenerate : function(carCodigo){
        ajaxLoader.ajaxStart();

        const elem = document.getElementById('allContainer');
        let userHistory = false;

        if (elem.querySelector('#historyContainer') != null) {
            console.log('tem history');
            userHistory = document.getElementById('historyTextarea').value;
        }

        $.ajax({
            url: '/shopping-cart/order-generate',
            data: {car_codigo: carCodigo, user_history: userHistory},
            method: 'post',
            dataType: 'json',
            error: function(){
                ajaxLoader.ajaxStop();
                var modal = new Modal({
                    title: 'Erro',
                    body : '<div class="alert alert-danger" role="alert">' + translate["shopping-cart-js-order-generate-error"] + '</div>',
                    buttonOK : false,
                    cancelText: 'OK',
                });
                modal.show();
            },
            success: function(json){
                if(json.status){
                    window.location.replace(json.url);
                }else{
                    ajaxLoader.ajaxStop();
                    var modal = new Modal({
                        title: json.title,
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                        cancelText: 'OK',
                        cancel: function(){
                            location.reload();
                        }
                    });
                    modal.show();
                }

            }
        });
    }

}

var userMedia = new userMedia();